import { defineComponent } from "vue";
import DownloadClient from "@/components/downloadClient";
import { useI18n } from "vue-i18n";
import './index.less'
import CustomBotton from "@/components/customBotton";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        return () => (
            <div class='strategy'>
                <div class='box1'>
                    <div class='left'>
                        <div class='title exceed1'>{t('strategy.box11')}<span>{t('strategy.box111')}</span></div>
                        <div class='centent exceed3'>{t('strategy.box12')}</div>
                        <CustomBotton title={t('strategy.box13')} className={'dark_blue'} style={{ marginTop: '60px' }} />
                    </div>
                    <div class='right animate__animated animate__fadeInBottomLeft'><img src="/strategy/box1/policyImg.svg" alt="" /></div>
                </div>
                <div class='box2' v-animate='animate__animated animate__fadeInLeft'>
                    <div class='left'>
                        <img src="/strategy/box2/box2.svg" alt="" />
                    </div>
                    <div class='right'>
                        <div class='text1 exceed1'>{t('strategy.box21')}</div>
                        <div class='text2 exceed1'>{t('strategy.box22')}</div>
                        <div class='text3 exceed2'>{t('strategy.box23')}</div>
                    </div>
                </div>
                <div class='box3' v-animate='animate__animated animate__fadeInRight'>
                    <div class='right'>
                        <div class='text1 exceed1'>{t('strategy.box31')}</div>
                        <div class='text2 exceed1'>{t('strategy.box32')}</div>
                        <div class='text3 exceed3'>{t('strategy.box33')}</div>
                    </div>
                    <div class='left'>
                        <img src="/strategy/box3/box3.svg" alt="" />
                    </div>
                </div>
                <div class='box4' v-animate='animate__animated animate__fadeInLeft'>
                    <div class='left'>
                        <img src="/strategy/box4/box4.svg" alt="" />
                    </div>
                    <div class='right'>
                        <div class='text1 exceed1'>{t('strategy.box41')}</div>
                        <div class='text2 exceed1'>{t('strategy.box42')}</div>
                        <div class='text3 exceed3'>{t('strategy.box43')}</div>
                    </div>
                </div>
                <div class='box3' v-animate='animate__animated animate__fadeInRight'>
                    <div class='right'>
                        <div class='text1 exceed1'>{t('strategy.box51')}</div>
                        <div class='text2 exceed1'>{t('strategy.box52')}</div>
                        <div class='text3 exceed3'>{t('strategy.box53')}</div>
                    </div>
                    <div class='left'>
                        <img src="/strategy/box5/box5.svg" alt="" />
                    </div>
                </div>
                <div class='box6'>
                    <div class='box4_text'>
                        <div class='box4_text1 exceed1'>{t('strategy.box61')}</div>
                        <div class='box4_text2 exceed3'>{t('strategy.box62')}</div>
                        <CustomBotton title={t('strategy.box13')} className={'orange'} />
                    </div>
                </div>
                <div class='box7'>
                    <div class='left'>
                        <div class='top'>
                            <div class='top_title exceed1'>{t('strategy.box71')}</div>
                            <div class='top_content exceed2'>{t('strategy.box72')}</div>
                        </div>
                        <div class='bottom'>
                            <div class='line' v-animate='animate__animated animate__fadeInLeft'>
                                <div class='line_img'><img src="/strategy/box7/Group 122.svg" alt="" /></div>
                                <div class='text'>
                                    <div class='text_title exceed1'>{t('strategy.box73')}</div>
                                    <div class='text_content exceed2'>{t('strategy.box74')}</div>
                                </div>
                            </div>
                            <div class='line' v-animate='animate__animated animate__fadeInLeft' style={{ animationDelay: '0.3s' }}>
                                <div class='line_img'><img src="/strategy/box7/Group 121.svg" alt="" /></div>
                                <div class='text'>
                                    <div class='text_title exceed1'>{t('strategy.box75')}</div>
                                    <div class='text_content exceed2'>{t('strategy.box76')}</div>
                                </div>
                            </div>
                            <div class='line' v-animate='animate__animated animate__fadeInLeft' style={{ animationDelay: '0.6s' }}>
                                <div class='line_img'><img src="/strategy/box7/Group 120.svg" alt="" /></div>
                                <div class='text'>
                                    <div class='text_title exceed1'>{t('strategy.box77')}</div>
                                    <div class='text_content exceed2'>{t('strategy.box78')}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class='right'><img src="/strategy/box7/policyImg2.svg" alt="" /></div>
                </div>
                <DownloadClient />
            </div>
        );
    },
})